<template>
  <div class="details_box_his">
    <div class="tab_search">
      <el-table
        :row-class-name="tableRowClassName"
        :data="useList"
        style="width: 100%"
        height="100px"
        v-adaptive
        :header-cell-class-name="headerRowStyle"
      >
        <el-table-column prop="date" label="序号" type="index" width="60">
        </el-table-column>
        <el-table-column prop="data1" label="来件单位" v-if="!isCasting">
        </el-table-column>
        <el-table-column prop="data2" label="批次号">
          <template slot-scope="scope">
            <span @click="handNavTo(scope.row)" style="cursor: pointer">
              {{ scope.row.data2 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="data3" label="零件号"> </el-table-column>
        <el-table-column prop="data4" label="零件名称"> </el-table-column>
        <el-table-column prop="data5" label="工序号"> </el-table-column>
        <el-table-column prop="data6" label="工序名称"> </el-table-column>
        <el-table-column prop="data8" label="设备编号"> </el-table-column>
        <el-table-column prop="data9" label="工艺规程编号" width="100">
        </el-table-column>
        <el-table-column prop="data10" label="来件数量" v-if="!isCasting">
        </el-table-column>
        <el-table-column prop="data13" label="完成数量"> </el-table-column>
        <!-- <el-table-column prop="data7" label="设备类型"> </el-table-column> -->
        <el-table-column prop="data11" label="当前状态"> </el-table-column>
        <el-table-column prop="data12" label="开始时间"> </el-table-column>
        <el-table-column prop="data14" label="完成时间"> </el-table-column>
        <el-table-column prop="data15" label="操作人"> </el-table-column>
        <!-- <el-table-column prop="num" label="任务号">
          <template slot-scope="scope">
            <div @click="handNavTo(scope.row)" class="num">
              {{ scope.row.num }}
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <transition name="el-fade-in-linear">
        <div v-if="show" class="search_box" v-init-screen-h>
          <div class="title">筛选</div>
          <el-form
            size="small"
            label-position="top"
            label-width="80px"
            :model="formLabelAlign"
            :rules="rules"
          >
            <el-form-item
              label="来件单位"
              prop="workingNumber"
              style="margin-right: 6px"
            >
              <el-input
                v-model="formLabelAlign.data1"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              label="批次号"
              prop="workingNumber"
              style="margin-right: 6px"
            >
              <el-input
                v-model="formLabelAlign.data2"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              label="零件号"
              prop="workingNumber"
              style="margin-right: 6px"
            >
              <el-input
                v-model="formLabelAlign.data3"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              label="工序号"
              prop="workingNumber"
              style="margin-right: 6px"
            >
              <el-input
                v-model="formLabelAlign.data5"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              label="设备编号"
              prop="workingNumber"
              style="margin-right: 6px"
            >
              <el-input
                v-model="formLabelAlign.data8"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="生产日期" prop="equipmentNumber">
              <div class="dis_center">
                <el-date-picker
                  v-model="formLabelAlign.time"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
                <span style="margin: 0 6px">-</span>
                <el-date-picker
                  v-model="formLabelAlign.time2"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-form>
          <div class="btns">
            <el-button style="width: 50%" size="small">重 置</el-button>
            <el-button style="width: 50%" size="small" type="primary"
              >提 交</el-button
            >
          </div>
        </div>
      </transition>
    </div>
    <div class="my_pag">
      <el-pagination
        background
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getClientHeight } from "@/utils/index";
import { CASTING_TYPE, TENANT_TITLE } from "@/utils/local";
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentPage4: 4,
      setHeight: 300,
      formLabelAlign: {
        sparParts: "",
        workingNumber: "",
        radio: 0,
        name: "",
        working: "",
        equipmentNumber: "",
        operator: ""
      },
      rules: {},
      tableData: [
        {
          data1: "机匣", //赖建单位
          data2: "100001", //批次号
          data3: "7868478", //零件号
          data4: "外环罩(上)", //零件名称
          data5: "5", //工序号
          data6: "预处理", //工序名称
          data8: "36#", //设备编号
          data9: "410-2d2847", //工艺规程编号
          data10: "100", //来件数量
          data13: "100", //完成数量
          data11: "完成", //当前状态
          data12: "2020.1.17-10:06:15", //开始时间
          data14: "2022.1.17-20:06:29", //完成时间
          data15: "张亮" //完成时间
        },
        {
          data1: "机匣", //赖建单位
          data2: "100002", //批次号
          data3: "7352878", //零件号
          data4: "外环罩(上)", //零件名称
          data5: "5", //工序号
          data6: "预处理", //工序名称
          data8: "37#", //设备编号
          data9: "410-3d1980", //工艺规程编号
          data10: "100", //来件数量
          data13: "100", //完成数量
          data11: "完成", //当前状态
          data12: "2020.1.17-8:36:10", //开始时间
          data14: "2022.1.17-18:16:22", //完成时间
          data15: "张亮" //完成时间
        },
        {
          data1: "盘轴", //赖建单位
          data2: "100003", //批次号
          data3: "2735278", //零件号
          data4: "高涡盘轴", //零件名称
          data5: "10", //工序号
          data6: "正火", //工序名称
          data8: "Z3", //设备编号
          data9: "410-9Z2373", //工艺规程编号
          data10: "20", //来件数量
          data13: "20", //完成数量
          data11: "完成", //当前状态
          data12: "2020.1.17-8:35:02", //开始时间
          data14: "2022.1.17-12:09:28", //完成时间
          data15: "李常伟" //完成时间
        },
        {
          data1: "盘轴", //赖建单位
          data2: "100004", //批次号
          data3: "1263839", //零件号
          data4: "低涡盘轴", //零件名称
          data5: "10", //工序号
          data6: "正火", //工序名称
          data8: "Z6", //设备编号
          data9: "410-2846d1", //工艺规程编号
          data10: "20", //来件数量
          data13: "20", //完成数量
          data11: "完成", //当前状态
          data12: "2020.1.17-8:23:17", //开始时间
          data14: "2022.1.17-12:32:42", //完成时间
          data15: "李常伟" //完成时间
        },
        {
          data1: "盘轴", //赖建单位
          data2: "100005", //批次号
          data3: "3827878", //零件号
          data4: "高涡盘轴", //零件名称
          data5: "5", //工序号
          data6: "预处理", //工序名称
          data8: "Z1", //设备编号
          data9: "410-9z2736", //工艺规程编号
          data10: "50", //来件数量
          data13: "50", //完成数量
          data11: "完成", //当前状态
          data12: "2020.1.17-8:45:11", //开始时间
          data14: "2022.1.17-13:56:12", //完成时间
          data15: "李常伟" //完成时间
        },
        {
          data1: "盘轴", //赖建单位
          data2: "100006", //批次号
          data3: "1928674", //零件号
          data4: "低涡盘轴", //零件名称
          data5: "5", //工序号
          data6: "预处理", //工序名称
          data8: "Z4", //设备编号
          data9: "410-9z1628", //工艺规程编号
          data10: "50", //来件数量
          data13: "50", //完成数量
          data11: "完成", //当前状态
          data12: "2020.1.17-8:45:11", //开始时间
          data14: "2022.1.17-13:56:12", //完成时间
          data15: "李常伟" //完成时间
        },
        {
          data1: "盘轴", //赖建单位
          data2: "100007", //批次号
          data3: "2837289", //零件号
          data4: "销推螺栓", //零件名称
          data5: "15", //工序号
          data6: "回火", //工序名称
          data8: "Z8", //设备编号
          data9: "410-9z8728", //工艺规程编号
          data10: "1000", //来件数量
          data13: "1000", //完成数量
          data11: "完成", //当前状态
          data12: "2020.1.17-8:25:18", //开始时间
          data14: "2022.1.17-11:23:57", //完成时间
          data15: "李常伟" //完成时间
        },
        {
          data1: "盘轴", //赖建单位
          data2: "100008", //批次号
          data3: "2746392", //零件号
          data4: "销推螺栓", //零件名称
          data5: "15", //工序号
          data6: "回火", //工序名称
          data8: "Z9", //设备编号
          data9: "410-9z2768", //工艺规程编号
          data10: "1000", //来件数量
          data13: "1000", //完成数量
          data11: "完成", //当前状态
          data12: "2020.1.17-9:11:34", //开始时间
          data14: "2022.1.17-12:31:23", //完成时间
          data15: "李常伟" //完成时间
        },
        {
          data1: "叶片", //赖建单位
          data2: "100009", //批次号
          data3: "2747399", //零件号
          data4: "双卡箍组件", //零件名称
          data5: "20", //工序号
          data6: "去毛刺", //工序名称
          data8: "烘3", //设备编号
          data9: "410-298474", //工艺规程编号
          data10: "2000", //来件数量
          data13: "2000", //完成数量
          data11: "完成", //当前状态
          data12: "2020.1.17-14:28:41", //开始时间
          data14: "2022.1.17-22:23:10", //完成时间
          data15: "王家豪" //完成时间
        },
        {
          data1: "叶片", //赖建单位
          data2: "100010", //批次号
          data3: "1263829", //零件号
          data4: "单卡箍组件", //零件名称
          data5: "20", //工序号
          data6: "去毛刺", //工序名称
          data8: "烘5", //设备编号
          data9: "410-7d2746", //工艺规程编号
          data10: "2000", //来件数量
          data13: "2000", //完成数量
          data11: "完成", //当前状态
          data12: "2020.1.17-13:11:34", //开始时间
          data14: "2022.1.17-21:31:23", //完成时间
          data15: "王家豪" //完成时间
        }
      ]
    };
  },
  computed: {
    isCasting() {
      const { name } = this.$store.getters.tenant;
      return name == TENANT_TITLE[2];
    },
    useList() {
      if (this.isCasting) {
        let i = 0;
        return this.tableData.map(item => {
          i++;
          if (i > 2) {
            i = 0;
          }
          return {
            ...item,
            data6: CASTING_TYPE[i]
          };
        });
      } else {
        return this.tableData;
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setHeight = getClientHeight(220);
    });
  },
  methods: {
    handNavTo(row) {
      this.$router.push({
        name: "historyDataDetails",
        query: { row: JSON.stringify(row) }
      });
    },
    headerRowStyle() {
      return "success-row";
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.details_box_his {
  /* background-color: #010b48; */
  .dis_center {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tab_search {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    width: 100%;
    .num {
      cursor: pointer;
    }
    .dis_item {
      display: flex;
      align-items: center;
      /deep/ .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: auto;
      }
    }
    .search_box::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .search_box::-webkit-scrollbar-track {
      background-color: inherit;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
    }
    .search_box::-webkit-scrollbar-thumb {
      background-color: #5dcbff;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }
    /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
    .search_box::-webkit-scrollbar-corner {
      /* background-color: #5dcbff; */
      display: none;
    }
    .search_box {
      /* height: 100%; */
      width: 20%;
      color: #fff;
      border: 1px solid #0da9f2;
      padding: 10px;
      margin-left: 10px;
      overflow: auto;
      position: relative;
      .btns {
        /* position: absolute;
        bottom: 0;
        left: 0; */
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        padding: 20px;
        padding-bottom: 10px;
      }
      .dis_row {
        /deep/ .el-form-item {
          display: flex;
          align-items: center;
          .el-form-item__content {
            white-space: nowrap;
            margin-left: 10px;
            .el-radio {
              margin-right: 6px !important;
              color: #fff;
            }
          }
          .el-form-item__label {
            white-space: nowrap;
          }
        }
      }
      /deep/ .el-form {
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 100%;
        }
        .el-popper[x-placement^="bottom"] .popper__arrow {
          border-bottom-color: #081f63;
        }
        .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover {
          background-color: #0da9f2;
        }
        .el-select-dropdown {
          background-color: #081f63;
          /* color: #fff !important; */
          border: 1px solid #0da9f2;
          span {
            color: #fff;
          }
        }
        .el-form-item {
          margin-bottom: 6px;
          .el-input__inner {
            background: rgba(1, 11, 71, 0.74);
            border: 1px solid #0da9f2;
          }
        }
        .el-form-item__label {
          padding: 0;
          color: #fff;
        }
      }
      .title {
        /* margin-bottom: 10px; */
      }
    }
  }
  .my_pag {
    text-align: center;
    margin-top: 10px;
    color: #fff;
    /deep/ .el-pagination button {
      background-color: inherit;
      .el-icon {
        color: #fff;
      }
    }
    /deep/ .el-pager {
      background-color: inherit;
      li {
        background-color: inherit;
        color: #fff;
      }
    }
    /deep/ .el-pagination__jump {
      color: #fff;
    }
    /deep/ .el-input__inner {
      background-color: #010b47;
      color: #fff;
      border: 1px solid #0da9f2;
    }
    /deep/ .el-pagination__total {
      color: #fff;
    }
  }
  /deep/ .gutter {
    display: none;
  }

  padding: 20px;
  margin-top: -30px;
  height: 100%;
  /deep/ .el-table {
    background-color: #093085 !important;
    border: 1px solid #0da9f2;
    .el-table__row:hover > td {
      background-color: inherit !important;
    }
    td,
    th.is-leaf {
      border-bottom: 0 !important;
    }
    .el-table__row--striped:hover > td {
      background-color: inherit;
    }
    .warning-row {
      background: #093085 !important;
      color: #fff;
    }
    .success-row {
      background: #002675;
      color: #fff;
    }
  }
}
</style>
